/*
 * @Author: YinJianFeng 814922893@qq.com
 * @Date: 2025-01-22 11:24:09
 * @LastEditors: 殷建峰
 * @LastEditTime: 2025-02-25 15:44:03
 */

import { widgetManager } from '@/common/managers/widgetManager';
import Playground from '@/components/Playground';
import { cmdLayouts } from '@/layouts/Commands';
import { LeftLayout } from '@/layouts/LeftPanels/panels/Database';
import { useInvoke } from '@/pages/invoke';
import { CommandManagerProvider, FeatureManager } from '@amcax/base';
import { useAsyncEffect } from 'ahooks';
import { ConfigProvider, Flex } from 'antd';
import { useEffect, useState } from 'react';
import { Header } from '../components';
import CmdHint from '../components/CmdHint';
import { theme } from './theme';

export default function Main() {
  const [isLoading, setIsLoading] = useState(false);
  useAsyncEffect(async () => {
    const featureFlagsUrl =
      (window.__MICRO_APP_ENVIRONMENT__
        ? '/app-nextshape/features.json'
        : '/features.json') +
      '?r=' +
      `${Math.random()}`.substring(2);
    await FeatureManager.loadFeatures(featureFlagsUrl);
    setIsLoading(true);
  }, []);
  useEffect(() => {
    widgetManager.hint();
    widgetManager.console();
    // 监听全局 Tab 键事件
    document.addEventListener('keydown', function (event) {
      // 检查是否为 Tab 键
      if (event.key === 'Tab') {
        event.preventDefault(); // 阻止默认行为
      }
    });
  }, []);
  const { currentCmd, invokeCmd, resetCmd, cmdDialog } = useInvoke();
  return (
    <>
      {isLoading && (
        <ConfigProvider theme={theme}>
          <CommandManagerProvider value={{ currentCmd, invokeCmd, resetCmd }}>
            <Flex vertical>
              <Header cmdLayouts={cmdLayouts} />
              {cmdDialog}
              <div
                style={{
                  position: 'relative',
                  height: `calc(100vh - ${window.__MICRO_APP_ENVIRONMENT__ ? 174 : 106}px)`,
                }}>
                <LeftLayout />
                <Playground />
                <CmdHint />
              </div>
            </Flex>
          </CommandManagerProvider>
        </ConfigProvider>
      )}
    </>
  );
}
